<!-- jquery 提供了         :first              :last          :eq -->
<!--       就很纯粹，就是拿匹配的元素中的第一个                            -->
<!-- 用原始的css语法替代    :first-child        :last-child    :nth-child  -->
<!--                       第一个儿子           最后一个儿子    第 n 个儿子，n 从 1 开始    -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
      p {
        background-color: pink;
      }

      /* 指的是第一个儿子，不限定类型 */
      /* 意思是：是p标签，并且，这个p标签还是第一个儿子 */
      p:first-child {
        background-color: hotpink;
      }

      /* 意思是：是p标签，并且，是所有p标签中的第一个 */
      p:first-of-type {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>1</div>
      <p>2</p>
      <ul>
        <li>3-1</li>
        <li>3-2</li>
        <li>3-3</li>
      </ul>
      <span>4</span>
      <div>5</div>
      <p>6</p>
      <p>7</p>
    </div>

    <script>
      $(function () {
        console.log("$('#app > p'):", $('#app > p'))
        console.log("$('#app > p:first'):", $('#app > p:first'))
        console.log("$('#app > p:first-child'):", $('#app > p:first-child'))
        // #app > p:first-of-type ==> 找第一个 p 儿子，限定了标签类型
        console.log("$('#app > p:first-of-type'):", $('#app > p:first-of-type'))
      })
    </script>
  </body>
</html>
